<template>
  <a-button
    :style="{ width: setWidth, height: setHeight }"
    class="c-button"
    :icon="icon"
    :size="size"
    :type="type"
    :shape="shape"
    :block="block"
    :disabled="disabled"
    :loading="loading"
    @click="onClick"
    :ghost="ghost"
    :class="[type === 'success' ? 'success' : '']"
  >
    <slot />
  </a-button>
</template>

<script>
import { debounce } from "@/util/common";

export default {
  props: {
    size: {
      type: String,
      default: null
    },
    type: {
      type: String,
      default: null
    },
    icon: {
      type: String,
      default: null
    },
    shape: {
      type: String,
      default: null
    },
    loading: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    block: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: null
    },
    height: {
      type: String,
      default: null
    },
    ghost: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {};
  },
  computed: {
    setWidth() {
      return this.width;
    },
    setHeight() {
      return this.height;
    }
  },
  methods: {
    //   对点击事件进行防抖处理
    onClick: debounce(function() {
      this.$emit("click");
    })
  },
  created() {
    // this.setWidth()
  }
};
</script>

<style lang="scss" scoped>
.ant-btn-success {
  background-color: var(--success);
  border-color: var(--success);
  color: #fff;
}
.success[disabled],
.ant-btn-warning[disabled] {
  color: rgba(0, 0, 0, 0.25);
  background-color: #f5f5f5;
  border-color: #d9d9d9;
  text-shadow: none;
  box-shadow: none;
}
.ant-btn-warning {
  background-color: var(--warning);
  border-color: var(--warning);
  color: #ffff;
}
</style>
